<template>
  <!-- 搜索工作栏 -->
  <el-form class="-mb-15px" :model="formData" ref="formRef" :inline="true" label-width="100px">
    <el-card>
      <el-row>
        <el-col :span="16">
          <span>订单明细</span>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" plain @click="submitForm">
              <Icon icon="ep:check" class="mr-5px" /> 保 存
            </el-button>
            <el-button type="primary" plain @click="place">
              <Icon icon="ep:download" class="mr-5px" /> 归 档
            </el-button>
            <el-button type="warning" plain @click="check">
              <Icon icon="ep:user" class="mr-5px" /> 审 核
            </el-button>
            <el-button type="warning" plain @click="reject" v-show="false">
              <Icon icon="ep:back" class="mr-5px" /> 驳 回
            </el-button>
            <el-button type="success" plain @click="endOrder">
              <Icon icon="ep:finished" class="mr-5px" /> 结 单
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- @keyup.enter="handleQuery" -->
      <el-form-item label="内部订单号" prop="internalOrderNo">
        <el-input
          v-model="formData.internalOrderNo"
          placeholder="请输入内部订单号"
          clearable
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="客户" prop="customerId">
        <el-select
          filterable
          style="width: 50%"
          v-model="formData.customerId"
          placeholder="请选择"
          clearable
        >
          <el-option label="张三" value="0" />
          <el-option label="李四" value="1" />
          <!-- <el-option
            v-for="item in customerOptions(DICT_TYPE.COMMON_STATUS)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          /> -->
        </el-select>
        <el-input style="width: 50%" v-model="formData.customerName" disabled />
      </el-form-item>

      <el-form-item label="订单日期" prop="orderDate">
        <el-date-picker
          v-model="formData.orderDate"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
          class="!w-220px"
        />
      </el-form-item>

      <el-form-item label="报价单号" prop="quotationNo">
        <el-input v-model="formData.quotationNo" placeholder="请输入报价单号" class="!w-240px" />
      </el-form-item>

      <el-form-item label="制单人" prop="creator">
        <el-input v-model="formData.creator" placeholder="请输入制单人" disabled class="!w-240px" />
      </el-form-item>
      <el-form-item label="客户订单号" prop="customerOrderNo">
        <el-input
          v-model="formData.customerOrderNo"
          placeholder="请输入客户订单号"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" placeholder="请输入备注" class="!w-240px" />
      </el-form-item>
      <el-form-item label="交货日期" prop="deliveryDate">
        <el-date-picker
          v-model="formData.deliveryDate"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
          class="!w-220px"
        />
      </el-form-item>

      <el-form-item label="合计金额" prop="price">
        <el-input v-model="formData.price" placeholder="请输入合计金额" class="!w-240px" />
      </el-form-item>
    </el-card>

    <!-- 生产单信息列表 -->
    <el-card>
      <el-row style="margin-bottom: 10px">
        <el-col :span="16">
          <span>生产单信息：</span>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item style="folt: right">
            <el-button type="primary" plain @click="addOrderRow"> 插 入 </el-button>
            <el-button type="primary" plain @click="copyOderRow"> 复制行 </el-button>
            <el-button type="primary" plain @click="switchOderBom"> 选择BOM </el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-table
        :data="list"
        border
        :stripe="true"
        highlight-current-row
        @current-change="handleCurrentChange"
      >
        <el-table-column label="生产单号" align="center" width="150%" fixed>
          <template #default="scope">
            <el-form-item
              style="width: 100%"
              :prop="`list.${scope.$index}.productionOrderNo`"
              :rules="{ required: true, message: '生产单号不能为空', trigger: 'blur' }"
            >
              <el-input v-model="scope.row.productionOrderNo" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="订单日期" align="center" width="150%">
          <template #default="scope">
            <el-form-item
              style="width: 100%"
              :prop="`list.${scope.$index}.orderDate`"
              :rules="{ required: true, message: '订单日期不能为空', trigger: 'blur' }"
            >
              <el-date-picker
                v-model="scope.row.orderDate"
                value-format="YYYY-MM-DD"
                type="date"
                class="!w-220px"
              />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="交货日期" align="center" width="150%">
          <template #default="scope">
            <el-form-item
              style="width: 100%"
              :prop="`list.${scope.$index}.deliveryDate`"
              :rules="{ required: true, message: '交货日期不能为空', trigger: 'blur' }"
            >
              <el-date-picker
                v-model="scope.row.deliveryDate"
                value-format="YYYY-MM-DD"
                type="date"
                class="!w-220px"
              />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="订单类型" align="center" width="150%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.orderType`">
              <el-select filterable v-model="scope.row.orderType">
                <el-option label="普单" value="0" />
                <el-option label="加急" value="1" />
                <!-- <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                /> -->
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="报价单位" align="center" width="150%">
          <template #default="scope">
            <el-form-item
              style="width: 100%"
              :prop="`list.${scope.$index}.quotationUnit`"
              :rules="{ required: true, message: '报价单位不能为空', trigger: 'blur' }"
            >
              <el-input v-model="scope.row.quotationUnit" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="客户采购单号" align="center" width="150%">
          <template #default="scope">
            <el-form-item
              style="width: 100%"
              :prop="`list.${scope.$index}.customerPurchaseOrderNo`"
              :rules="{ required: true, message: '客户采购单号不能为空', trigger: 'blur' }"
            >
              <el-input v-model="scope.row.customerPurchaseOrderNo" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="BOM No" align="center" width="150%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.bomNo`">
              <el-input v-model="scope.row.bomNo" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="货号" align="center" width="150%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.productCode`">
              <el-input v-model="scope.row.productCode" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="品名" align="center" width="150%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.productName`">
              <el-input v-model="scope.row.productName" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="品名2" align="center" width="150%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.productName2`">
              <el-input v-model="scope.row.productName2" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="款型编号" align="center" width="150%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.styleCode`">
              <el-input v-model="scope.row.styleCode" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="款型名称" align="center" width="150%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.styleName`">
              <el-input v-model="scope.row.styleName" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="材质编号" align="center" width="150%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.materialCode`">
              <el-input v-model="scope.row.materialCode" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="材质名称" align="center" width="150%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.materialName`">
              <el-input v-model="scope.row.materialName" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="生产材质编号" align="center" width="150%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.productionMaterialCode`">
              <el-input v-model="scope.row.productionMaterialCode" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="生产材质名称" align="center" width="150%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.productionMaterialName`">
              <el-input v-model="scope.row.productionMaterialName" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="订单长" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.orderLength`">
              <el-input v-model="scope.row.orderLength" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="订单宽" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.orderWidth`">
              <el-input v-model="scope.row.orderWidth" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="订单高" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.orderHeight`">
              <el-input v-model="scope.row.orderHeight" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="单位" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.unit`">
              <el-input v-model="scope.row.unit" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="订单规格" align="center" width="150%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.orderSpecification`">
              <el-input v-model="scope.row.orderSpecification" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="订单数" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.orderQuantity`">
              <el-input v-model="scope.row.orderQuantity" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="备品数" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.sparePartsQuantity`">
              <el-input v-model="scope.row.sparePartsQuantity" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="生产数" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.productionQuantity`">
              <el-input v-model="scope.row.productionQuantity" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="片接方式" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.pieceAttachmentMethod`">
              <el-input v-model="scope.row.pieceAttachmentMethod" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="客户特价" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.isCustomerSpecialPrice`">
              <el-checkbox-group v-model="scope.row.isCustomerSpecialPrice" style="margin: auto">
                <el-checkbox />
              </el-checkbox-group>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="面积报价" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.areaQuotation`">
              <el-input v-model="scope.row.areaQuotation" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="单价" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.unitPrice`">
              <el-input v-model="scope.row.unitPrice" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="体积" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.volume`">
              <el-input v-model="scope.row.volume" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="排产数" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.productionPlanQuantity`">
              <el-input v-model="scope.row.productionPlanQuantity" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="入库数" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.warehouseInQuantity`">
              <el-input v-model="scope.row.warehouseInQuantity" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="送货数" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.deliveryQuantity`">
              <el-input v-model="scope.row.deliveryQuantity" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="印刷颜色" align="center" width="100%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.printColor`">
              <el-input v-model="scope.row.printColor" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="报价单号" align="center" width="150%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.quotationNo`">
              <el-input v-model="scope.row.quotationNo" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="生产长" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.productionLength`">
              <el-input v-model="scope.row.productionLength" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="生产宽" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.productionWidth`">
              <el-input v-model="scope.row.productionWidth" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="生产高" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.productionHeight`">
              <el-input v-model="scope.row.productionHeight" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="生产规格" align="center" width="150%">
          <template #default="scope">
            <el-form-item
              style="width: 100%"
              :prop="`list.${scope.$index}.productionSpecification`"
            >
              <el-input v-model="scope.row.productionSpecification" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="横切版号" align="center" width="150%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.crossCuttingVersionNo`">
              <el-input v-model="scope.row.crossCuttingVersionNo" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="制单人" align="center" width="110%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.creator`">
              <el-input v-model="scope.row.creator" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="建单日期" align="center" width="150%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.createTime`">
              <el-date-picker
                v-model="scope.row.createTime"
                value-format="YYYY-MM-DD HH:mm:ss"
                type="datetime"
              />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="审核" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.isApproved`">
              <el-checkbox-group v-model="scope.row.isApproved" style="margin: auto">
                <el-checkbox />
              </el-checkbox-group>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="面积" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.area`">
              <el-input v-model="scope.row.area" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="包装数" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.packagingQuantity`">
              <el-input v-model="scope.row.packagingQuantity" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="备注" align="center" width="150%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.remark`">
              <el-input v-model="scope.row.remark" type="textarea" :rows="1" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="结单" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.isFinalized`">
              <el-checkbox-group v-model="scope.row.isFinalized" style="margin: auto">
                <el-checkbox />
              </el-checkbox-group>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="打印" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.isPrinted`">
              <el-checkbox-group v-model="scope.row.isPrinted" style="margin: auto">
                <el-checkbox />
              </el-checkbox-group>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="生产备注" align="center" width="150%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.productionRemark`">
              <el-input v-model="scope.row.productionRemark" type="textarea" :rows="1" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="内外径" align="center" width="110%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.innerOuterDiameter`">
              <el-input v-model="scope.row.innerOuterDiameter" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="楞型" align="center" width="110%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.flangeType`">
              <el-input v-model="scope.row.flangeType" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="模切算料" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.dieCuttingCalculation`">
              <el-checkbox-group v-model="scope.row.dieCuttingCalculation" style="margin: auto">
                <el-checkbox />
              </el-checkbox-group>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="模板宽" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.templateWidth`">
              <el-input v-model="scope.row.templateWidth" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="模板长" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.templateLength`">
              <el-input v-model="scope.row.templateLength" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="模数" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.modulus`">
              <el-input v-model="scope.row.modulus" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="外协" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.outsourcing`">
              <el-checkbox-group v-model="scope.row.outsourcing" style="margin: auto">
                <el-checkbox />
              </el-checkbox-group>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="产品类型" align="center" width="130%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.productType`">
              <el-select filterable v-model="scope.row.productType">
                <el-option label="纸箱类" value="0" />
                <!-- <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                /> -->
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="配比数" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.proportionQuantity`">
              <el-input v-model="scope.row.proportionQuantity" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="产品单位" align="center" width="110%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.productUnit`">
              <el-input v-model="scope.row.productUnit" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="子件" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.subcomponent`">
              <el-checkbox-group v-model="scope.row.subcomponent" style="margin: auto">
                <el-checkbox />
              </el-checkbox-group>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="序号" align="center" width="130%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.serialNo`">
              <el-input v-model="scope.row.serialNo" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="钉条" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.stapleBar`">
              <el-input v-model="scope.row.stapleBar" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="加分" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.addPoints`">
              <el-input v-model="scope.row.addPoints" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="外购" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.isExternalPurchase`">
              <el-checkbox-group v-model="scope.row.isExternalPurchase" style="margin: auto">
                <el-checkbox />
              </el-checkbox-group>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="套数" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.sets`">
              <el-input v-model="scope.row.sets" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="厚度" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.thickness`">
              <el-input v-model="scope.row.thickness" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="单重" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.unitWeight`">
              <el-input v-model="scope.row.unitWeight" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="天地盒" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.isHeavenBox`">
              <el-checkbox-group v-model="scope.row.isHeavenBox" style="margin: auto">
                <el-checkbox />
              </el-checkbox-group>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="天地盒高" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.heavenBoxHeight`">
              <el-input v-model="scope.row.heavenBoxHeight" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="天地盒长" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.heavenBoxLength`">
              <el-input v-model="scope.row.heavenBoxLength" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="天地盒宽" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.heavenBoxWidth`">
              <el-input v-model="scope.row.heavenBoxWidth" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="金额" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.amount`">
              <el-input v-model="scope.row.amount" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="套件ID" align="center" width="150%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.setId`">
              <el-input v-model="scope.row.setId" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="主件ID" align="center" width="150%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.mainItemId`">
              <el-input v-model="scope.row.mainItemId" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="总面积" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.totalArea`">
              <el-input v-model="scope.row.totalArea" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="参数1" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.parameter1`">
              <el-input v-model="scope.row.parameter1" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="参数2" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.parameter2`">
              <el-input v-model="scope.row.parameter2" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="参数3" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.parameter3`">
              <el-input v-model="scope.row.parameter3" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="参数4" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.parameter4`">
              <el-input v-model="scope.row.parameter4" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="参数5" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.parameter5`">
              <el-input v-model="scope.row.parameter5" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="参数6" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.parameter6`">
              <el-input v-model="scope.row.parameter6" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="参数7" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.parameter7`">
              <el-input v-model="scope.row.parameter7" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="参数8" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.parameter8`">
              <el-input v-model="scope.row.parameter8" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="参数9" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.parameter9`">
              <el-input v-model="scope.row.parameter9" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="参数10" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.parameter10`">
              <el-input v-model="scope.row.parameter10" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="同款" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.isSameModel`">
              <el-checkbox-group v-model="scope.row.isSameModel" style="margin: auto">
                <el-checkbox />
              </el-checkbox-group>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="BOM序号" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.bomSequenceNumber`">
              <el-input v-model="scope.row.bomSequenceNumber" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="BOM层级" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.bomLevel`">
              <el-input v-model="scope.row.bomLevel" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="未入库数" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.unshippedQuantity`">
              <el-input v-model="scope.row.unshippedQuantity" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="未送货数" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.unsentQuantity`">
              <el-input v-model="scope.row.unsentQuantity" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="总体积" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.totalVolume`">
              <el-input v-model="scope.row.totalVolume" />
            </el-form-item>
          </template>
        </el-table-column>

        <!-- 弹窗查询 -->
        <el-table-column label="印刷版号" align="center" width="120%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.printVersionNo`">
              <el-input v-model="scope.row.printVersionNo" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="加损耗" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.addLoss`">
              <el-checkbox-group v-model="scope.row.addLoss" style="margin: auto">
                <el-checkbox />
              </el-checkbox-group>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="折扣" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.discount`">
              <el-input v-model="scope.row.discount" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="面积单价" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.areaUnitPrice`">
              <el-input v-model="scope.row.areaUnitPrice" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="总重" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.totalWeight`">
              <el-input v-model="scope.row.totalWeight" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="送货地址" align="center" width="150%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.deliveryAddress`">
              <el-input v-model="scope.row.deliveryAddress" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="送货区域" align="center" width="150%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.deliveryRegion`">
              <el-input v-model="scope.row.deliveryRegion" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="修改时间" align="center" width="150%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.updateTime`">
              <el-date-picker
                v-model="scope.row.updateTime"
                value-format="YYYY-MM-DD HH:mm:ss"
                type="datetime"
              />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="修改人" align="center" width="90%">
          <template #default="scope">
            <el-form-item style="width: 100%" :prop="`list.${scope.$index}.updater`">
              <el-input v-model="scope.row.updater" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="100%" fixed="right">
          <template #default="scope">
            <el-button
              link
              type="danger"
              @click="handleDelete(scope.$index, scope.row.id)"
              v-hasPermi="['erp:sale-product-order:delete']"
            >
              删 除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="formData.pageNo"
        v-model:limit="formData.pageSize"
        @pagination="getOrderList"
      />
    </el-card>

    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="用料信息" name="first">
        <el-form-item>
          <el-button type="primary" plain @click="addMtlRow"> 添 加 </el-button>
          <el-button type="primary" plain @click="computeMtl"> 计算用料 </el-button>
          <el-button type="primary" plain @click="selectMtl"> 选 料 </el-button>
          <el-button type="primary" plain @click="copyMtlRow"> 复制行 </el-button>
        </el-form-item>

        <el-table :data="materialList" border :stripe="true">
          <el-table-column label="序号" align="center" type="index" width="80" />

          <el-table-column label="类型" align="center" width="150%">
            <template #default="scope">
              <el-form-item style="width: 100%" :prop="`materialList.${scope.$index}.type`">
                <el-select filterable v-model="scope.row.type" placeholder="请选择" clearable>
                  <el-option label="纸板" value="0" />
                  <el-option label="坑纸" value="1" />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 计算长 -->
          <el-table-column label="计算长" align="center" width="90%">
            <template #default="scope">
              <el-form-item
                style="width: 100%"
                :prop="`materialList.${scope.$index}.calculatedLength`"
              >
                <el-input v-model="scope.row.calculatedLength" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 计算宽 -->
          <el-table-column label="计算宽" align="center" width="90%">
            <template #default="scope">
              <el-form-item
                style="width: 100%"
                :prop="`materialList.${scope.$index}.calculatedWidth`"
              >
                <el-input v-model="scope.row.calculatedWidth" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 采购宽 -->
          <el-table-column label="采购宽" align="center" width="90%">
            <template #default="scope">
              <el-form-item
                style="width: 100%"
                :prop="`materialList.${scope.$index}.purchasedLength`"
              >
                <el-input v-model="scope.row.purchasedLength" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 采购数量 -->
          <el-table-column label="采购数量" align="center" width="90%">
            <template #default="scope">
              <el-form-item
                style="width: 100%"
                :prop="`materialList.${scope.$index}.purchasedQuantity`"
              >
                <el-input v-model="scope.row.purchasedQuantity" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 需求数 -->
          <el-table-column label="需求数" align="center" width="90%">
            <template #default="scope">
              <el-form-item
                style="width: 100%"
                :prop="`materialList.${scope.$index}.demandQuantity`"
              >
                <el-input v-model="scope.row.demandQuantity" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 宽开 -->
          <el-table-column label="宽开" align="center" width="90%">
            <template #default="scope">
              <el-form-item style="width: 100%" :prop="`materialList.${scope.$index}.wideCut`">
                <el-input v-model="scope.row.wideCut" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 长开 -->
          <el-table-column label="长开" align="center" width="90%">
            <template #default="scope">
              <el-form-item style="width: 100%" :prop="`materialList.${scope.$index}.longCut`">
                <el-input v-model="scope.row.longCut" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 单位 -->
          <el-table-column label="单位" align="center" width="150%">
            <template #default="scope">
              <el-form-item style="width: 100%" :prop="`materialList.${scope.$index}.unit`">
                <el-select filterable v-model="scope.row.unit" placeholder="请选择" clearable>
                  <el-option label="个" value="1" />
                  <el-option label="米" value="2" />
                  <el-option label="平方米" value="3" />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 横压1 -->
          <el-table-column label="横压1" align="center" width="90%">
            <template #default="scope">
              <el-form-item
                style="width: 100%"
                :prop="`materialList.${scope.$index}.horizontalPress1`"
              >
                <el-input v-model="scope.row.horizontalPress1" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 横压2 -->
          <el-table-column label="横压2" align="center" width="90%">
            <template #default="scope">
              <el-form-item
                style="width: 100%"
                :prop="`materialList.${scope.$index}.horizontalPress2`"
              >
                <el-input v-model="scope.row.horizontalPress2" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 横压3 -->
          <el-table-column label="横压3" align="center" width="90%">
            <template #default="scope">
              <el-form-item
                style="width: 100%"
                :prop="`materialList.${scope.$index}.horizontalPress3`"
              >
                <el-input v-model="scope.row.horizontalPress3" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 纵压1 -->
          <el-table-column label="纵压1" align="center" width="90%">
            <template #default="scope">
              <el-form-item
                style="width: 100%"
                :prop="`materialList.${scope.$index}.verticalPress1`"
              >
                <el-input v-model="scope.row.verticalPress1" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 纵压2 -->
          <el-table-column label="纵压2" align="center" width="90%">
            <template #default="scope">
              <el-form-item
                style="width: 100%"
                :prop="`materialList.${scope.$index}.verticalPress2`"
              >
                <el-input v-model="scope.row.verticalPress2" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 纵压3 -->
          <el-table-column label="纵压3" align="center" width="90%">
            <template #default="scope">
              <el-form-item
                style="width: 100%"
                :prop="`materialList.${scope.$index}.verticalPress3`"
              >
                <el-input v-model="scope.row.verticalPress3" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 纵压4 -->
          <el-table-column label="纵压4" align="center" width="90%">
            <template #default="scope">
              <el-form-item
                style="width: 100%"
                :prop="`materialList.${scope.$index}.verticalPress4`"
              >
                <el-input v-model="scope.row.verticalPress4" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 纵压5 -->
          <el-table-column label="纵压5" align="center" width="90%">
            <template #default="scope">
              <el-form-item
                style="width: 100%"
                :prop="`materialList.${scope.$index}.verticalPress5`"
              >
                <el-input v-model="scope.row.verticalPress5" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 横压4 -->
          <el-table-column label="横压4" align="center" width="90%">
            <template #default="scope">
              <el-form-item
                style="width: 100%"
                :prop="`materialList.${scope.$index}.horizontalPress4`"
              >
                <el-input v-model="scope.row.horizontalPress4" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 横压5 -->
          <el-table-column label="横压5" align="center" width="90%">
            <template #default="scope">
              <el-form-item
                style="width: 100%"
                :prop="`materialList.${scope.$index}.horizontalPress5`"
              >
                <el-input v-model="scope.row.horizontalPress5" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 备注 -->
          <el-table-column label="备注" align="center" width="150%">
            <template #default="scope">
              <el-form-item style="width: 100%" :prop="`materialList.${scope.$index}.remark`">
                <el-input v-model="scope.row.remark" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 材质编号 -->
          <el-table-column label="材质编号" align="center" width="150%">
            <template #default="scope">
              <el-form-item style="width: 100%" :prop="`materialList.${scope.$index}.materialCode`">
                <el-input v-model="scope.row.materialCode" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 材质名称 -->
          <el-table-column label="材质名称" align="center" width="150%">
            <template #default="scope">
              <el-form-item style="width: 100%" :prop="`materialList.${scope.$index}.materialName`">
                <el-input v-model="scope.row.materialName" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 压线类型 -->
          <el-table-column label="压线类型" align="center" width="150%">
            <template #default="scope">
              <el-form-item
                style="width: 100%"
                :prop="`materialList.${scope.$index}.pressLineType`"
              >
                <el-select
                  filterable
                  v-model="scope.row.pressLineType"
                  placeholder="请选择"
                  clearable
                >
                  <el-option label="类型A" value="A" />
                  <el-option label="类型B" value="B" />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 数量比 -->
          <el-table-column label="数量比" align="center" width="90%">
            <template #default="scope">
              <el-form-item
                style="width: 100%"
                :prop="`materialList.${scope.$index}.quantityRatio`"
              >
                <el-input v-model="scope.row.quantityRatio" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 已采购净板数 -->
          <el-table-column label="已采购净板数" align="center" width="90%">
            <template #default="scope">
              <el-form-item
                style="width: 100%"
                :prop="`materialList.${scope.$index}.purchasedCleanBoardQuantity`"
              >
                <el-input v-model="scope.row.purchasedCleanBoardQuantity" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 用料来源 -->
          <el-table-column label="用料来源" align="center" width="150%">
            <template #default="scope">
              <el-form-item
                style="width: 100%"
                :prop="`materialList.${scope.$index}.materialSource`"
              >
                <el-select
                  filterable
                  v-model="scope.row.materialSource"
                  placeholder="请选择"
                  clearable
                >
                  <el-option label="来源1" value="1" />
                  <el-option label="来源2" value="2" />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 计算数量 -->
          <el-table-column label="计算数量" align="center" width="90%">
            <template #default="scope">
              <el-form-item
                style="width: 100%"
                :prop="`materialList.${scope.$index}.calculatedQuantity`"
              >
                <el-input v-model="scope.row.calculatedQuantity" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 供应商编号 -->
          <el-table-column label="供应商编号" align="center" width="150%">
            <template #default="scope">
              <el-form-item style="width: 100%" :prop="`materialList.${scope.$index}.supplierCode`">
                <el-input v-model="scope.row.supplierCode" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 供应商名称 -->
          <el-table-column label="供应商名称" align="center" width="150%">
            <template #default="scope">
              <el-form-item style="width: 100%" :prop="`materialList.${scope.$index}.supplierName`">
                <el-input v-model="scope.row.supplierName" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 毛板系数 -->
          <el-table-column label="毛板系数" align="center" width="90%">
            <template #default="scope">
              <el-form-item
                style="width: 100%"
                :prop="`materialList.${scope.$index}.grossBoardCoefficient`"
              >
                <el-input v-model="scope.row.grossBoardCoefficient" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 净板系数 -->
          <el-table-column label="净板系数" align="center" width="150%">
            <template #default="scope">
              <el-form-item
                style="width: 100%"
                :prop="`materialList.${scope.$index}.cleanBoardCoefficient`"
              >
                <el-input v-model="scope.row.cleanBoardCoefficient" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 面积报价 -->
          <el-table-column label="面积报价" align="center" width="150%">
            <template #default="scope">
              <el-form-item
                style="width: 100%"
                :prop="`materialList.${scope.$index}.areaQuotation`"
              >
                <el-input v-model="scope.row.areaQuotation" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 厚度 -->
          <el-table-column label="厚度" align="center" width="90%">
            <template #default="scope">
              <el-form-item style="width: 100%" :prop="`materialList.${scope.$index}.thickness`">
                <el-input v-model="scope.row.thickness" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 密度 -->
          <el-table-column label="密度" align="center" width="90%">
            <template #default="scope">
              <el-form-item style="width: 100%" :prop="`materialList.${scope.$index}.density`">
                <el-input v-model="scope.row.density" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 总开数 -->
          <el-table-column label="总开数" align="center" width="90%">
            <template #default="scope">
              <el-form-item
                style="width: 100%"
                :prop="`materialList.${scope.$index}.totalOpenCount`"
              >
                <el-input v-model="scope.row.totalOpenCount" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 模数 -->
          <el-table-column label="模数" align="center" width="90%">
            <template #default="scope">
              <el-form-item style="width: 100%" :prop="`materialList.${scope.$index}.modulus`">
                <el-input v-model="scope.row.modulus" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 单个原料重量 -->
          <el-table-column label="单个原料重量" align="center" width="110%">
            <template #default="scope">
              <el-form-item
                style="width: 100%"
                :prop="`materialList.${scope.$index}.singleRawMaterialWeight`"
              >
                <el-input v-model="scope.row.singleRawMaterialWeight" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 总长 -->
          <el-table-column label="总长" align="center" width="90%">
            <template #default="scope">
              <el-form-item style="width: 100%" :prop="`materialList.${scope.$index}.totalLength`">
                <el-input v-model="scope.row.totalLength" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 长损耗 -->
          <el-table-column label="长损耗" align="center" width="90%">
            <template #default="scope">
              <el-form-item style="width: 100%" :prop="`materialList.${scope.$index}.lengthLoss`">
                <el-input v-model="scope.row.lengthLoss" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 宽损耗 -->
          <el-table-column label="宽损耗" align="center" width="90%">
            <template #default="scope">
              <el-form-item style="width: 100%" :prop="`materialList.${scope.$index}.widthLoss`">
                <el-input v-model="scope.row.widthLoss" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 用料单位 -->
          <el-table-column label="用料单位" align="center" width="150%">
            <template #default="scope">
              <el-form-item style="width: 100%" :prop="`materialList.${scope.$index}.materialUnit`">
                <el-select
                  filterable
                  v-model="scope.row.materialUnit"
                  placeholder="请选择"
                  clearable
                >
                  <el-option label="吨" value="1" />
                  <el-option label="千克" value="2" />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 修边 -->
          <el-table-column label="修边" align="center" width="90%">
            <template #default="scope">
              <el-form-item style="width: 100%" :prop="`materialList.${scope.$index}.trimming`">
                <el-input v-model="scope.row.trimming" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 备注1 -->
          <el-table-column label="备注1" align="center" width="150%">
            <template #default="scope">
              <el-form-item style="width: 100%" :prop="`materialList.${scope.$index}.remark1`">
                <el-input v-model="scope.row.remark1" placeholder="请输入" />
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="100%" fixed="right">
            <template #default="scope">
              <el-button link type="danger" @click="handleDeleteMtl(scope.row.id)">
                删 除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          :total="mtlTotal"
          v-model:page="formData.mtlPageNo"
          v-model:limit="formData.mtlPageSize"
          @pagination="getMtlList"
        />
      </el-tab-pane>

      <el-tab-pane label="文件" name="second"> 文件 </el-tab-pane>
	 
      <el-tab-pane label="生产工艺" name="third"> 
	   <el-form-item>
	     <el-button type="primary" plain @click="addMtlRow"> 添 加 </el-button>
	     <el-button type="primary" plain @click="computeMtl"> 移 除 </el-button>
	     <el-button type="primary" plain @click="selectMtl"> 重新获取公式 </el-button>
	     <el-button type="primary" plain @click="copyMtlRow"> 计算工价 </el-button>
		 <el-button type="primary" plain @click="copyMtlRow"> 计算生产数 </el-button>
	   </el-form-item>
	   </el-tab-pane>
      <el-tab-pane label="同款多订单" name="fourth"> 同款多订单 </el-tab-pane>
    </el-tabs>
  </el-form>

<!-- 选择BOM -->
  <el-dialog title="BOM数据" v-model="dialogVisible" width="90%">
    <el-form
      class="-mb-15px"
      :model="bomQueryParams"
      ref="bomQueryFormRef"
      :inline="true"
      label-width="100px"
    >
      <el-form-item label="客户" prop="customerId">
        <el-select
          filterable
          style="width: 50%"
          v-model="bomQueryParams.customerId"
          placeholder="请选择"
          clearable
        >
          <el-option label="张三" value="0" />
          <el-option label="李四" value="1" />
          <!-- <el-option
            v-for="item in customerOptions(DICT_TYPE.COMMON_STATUS)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          /> -->
        </el-select>
        <el-input style="width: 50%" v-model="bomQueryParams.customerName" disabled />
      </el-form-item>

      <el-form-item label="Bom编号" prop="bomCode">
        <el-input
          v-model="bomQueryParams.bomCode"
          placeholder="请输入Bom编号"
          clearable
          @keyup.enter="handleBomQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="货号" prop="customerOrderNo">
        <el-input
          v-model="bomQueryParams.customerOrderNo"
          placeholder="请输入客户订单号"
          clearable
          @keyup.enter="handleBomQuery"
          class="!w-240px"
        />
      </el-form-item>

      <el-form-item label="品名" prop="customerOrderNo">
        <el-input
          v-model="bomQueryParams.customerOrderNo"
          placeholder="请输入客户订单号"
          clearable
          @keyup.enter="handleBomQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="handleBomQuery"
          ><Icon icon="ep:search" class="mr-5px" /> 搜 索</el-button
        >
      </el-form-item>

      <el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-checkbox-group v-model="bomQueryParams.isChild" style="margin: auto">
              <el-checkbox label="加载子件" />
            </el-checkbox-group>
          </el-col>
          <el-col :span="12">
            <el-checkbox-group v-model="bomQueryParams.isBom" style="margin: auto">
              <el-checkbox label="加载所有bom" />
            </el-checkbox-group>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="bomLoading"
      :data="bomList"
      :stripe="true"
      :show-overflow-tooltip="true"
      highlight-current-row
      @current-change="handleBomCurrentChange"
    >
      <el-table-column label="ID" align="center" prop="id" />
      <el-table-column label="BOM编号" align="center" prop="bomNo" />
      <el-table-column label="货号" align="center" prop="productCode" />
      <el-table-column label="品名" align="center" prop="productName" />
      <el-table-column label="材质编号" align="center" prop="materialCode" />
      <el-table-column label="材质名称" align="center" prop="materialName" />
      <el-table-column label="生产材质编号" align="center" prop="productionMaterialCode" />
      <el-table-column label="生产材质名称" align="center" prop="productionMaterialName" />
      <el-table-column label="款型编号" align="center" prop="styleCode" />
      <el-table-column label="款型名称" align="center" prop="styleName" />
      <el-table-column label="长" align="center" prop="orderLength" />
      <el-table-column label="宽" align="center" prop="orderWidth" />
      <el-table-column label="高" align="center" prop="orderHeight" />
      <el-table-column label="规格" align="center" prop="orderSpecification" />
      <el-table-column label="单位" align="center" prop="unit" />
      <el-table-column label="单重" align="center" prop="unit" />
      <el-table-column label="单个立方" align="center" prop="orderQuantity" />
      <el-table-column label="备注" align="center" prop="orderQuantity" />
      <el-table-column label="材料结构" align="center" prop="orderQuantity" />
      <el-table-column label="产品类型" align="center" prop="orderQuantity" />
      <el-table-column label="产品单位" align="center" prop="orderQuantity" />
      <el-table-column label="子件" align="center" prop="orderQuantity" />
      <el-table-column label="厚度" align="center" prop="orderQuantity" />
      <el-table-column label="客户编号" align="center" prop="orderQuantity" />
      <el-table-column label="客户简称" align="center" prop="orderQuantity" />
      <el-table-column label="创建时间" align="center" prop="orderQuantity" />
      <el-table-column label="印刷版号" align="center" prop="orderQuantity" />
      <el-table-column label="库存" align="center" prop="orderQuantity" />
      <el-table-column label="采购长" align="center" prop="orderQuantity" />
      <el-table-column label="采购宽" align="center" prop="orderQuantity" />
      <el-table-column label="净版长" align="center" prop="orderQuantity" />
      <el-table-column label="净版宽" align="center" prop="orderQuantity" />
    </el-table>
    <Pagination
      :total="bomTotal"
      v-model:page="bomQueryParams.bomPageNo"
      v-model:limit="bomQueryParams.bomPageSize"
      @pagination="getBomList"
    />
  </el-dialog>


  <!-- 选料 -->
  <el-dialog title="选料" v-model="dialogMtlVisible" width="90%">
    <el-table
      v-loading="selectMtlLoading"
      :data="selectMtlList"
      :stripe="true"
      :show-overflow-tooltip="true"
      highlight-current-row
      @current-change="handleSelectMtlCurrentChange"
    >
      <el-table-column label="材质编号" align="center" prop="materialCode" />
      <el-table-column label="材质名称" align="center" prop="materialName" />
      <el-table-column label="厚度" align="center" prop="productionMaterialCode" />
      <el-table-column label="幅宽" align="center" prop="productionMaterialName" />
      <el-table-column label="宽开" align="center" prop="styleCode" />
      <el-table-column label="净版损耗" align="center" prop="styleName" />
      <el-table-column label="数量" align="center" prop="orderLength" />
      <el-table-column label="长" align="center" prop="orderWidth" />
      <el-table-column label="长开" align="center" prop="orderHeight" />
      <el-table-column label="可用库存" align="center" prop="orderSpecification" />
      <el-table-column label="标签号" align="center" prop="unit" />
      <el-table-column label="供应商" align="center" prop="unit" />
      <el-table-column label="英寸幅宽" align="center" prop="orderQuantity" />
      <el-table-column label="损耗" align="center" prop="orderQuantity" />
    </el-table>
  </el-dialog>
</template>

<script setup lang="ts">
import { SaleProductOrderApi } from '@/api/erp/saleproductorder'
import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'

const message = useMessage() // 消息弹窗
const { t } = useI18n()
const { push } = useRouter()
const route = useRoute()

const activeName = ref('first')
const loading = ref(true)
const bomLoading = ref(true)
const selectMtlLoading = ref(false)
const list = ref([])
const materialList = ref([])
const bomList = ref([])
const selectMtlList = ref([])
const total = ref(0)
const mtlTotal = ref(0)
const formData = ref({})
const formRef = ref()
const dialogVisible = ref(false)
const dialogMtlVisible = ref(false)

const emptyRow = ref({
  productionOrderNo: '', // 生产单号
  orderDate: '', // 订单日期
  deliveryDate: '', // 交货日期
  orderType: '', // 订单类型
  quotationUnit: '', // 报价单位
  customerPurchaseOrderNo: '', // 客户采购单号
  bomNo: '', // BOM No
  productCode: '', // 货号
  productName: '', // 品名
  productName2: '', // 品名2
  styleCode: '', // 款型编号
  styleName: '', // 款型名称
  materialCode: '', // 材质编号
  materialName: '', // 材质名称
  productionMaterialCode: '', // 生产材质编号
  productionMaterialName: '', // 生产材质名称
  orderLength: '', // 订单长
  orderWidth: '', // 订单宽
  orderHeight: '', // 订单高
  unit: '', // 单位
  orderSpecification: '', // 订单规格
  orderQuantity: '', // 订单数
  sparePartsQuantity: '', // 备品数
  productionQuantity: '', // 生产数
  pieceAttachmentMethod: '', // 片接方式
  isCustomerSpecialPrice: false, // 客户特价
  areaQuotation: '', // 面积报价
  unitPrice: '', // 单价
  volume: '', // 体积
  productionPlanQuantity: '', // 排产数
  warehouseInQuantity: '', // 入库数
  deliveryQuantity: '', // 送货数
  printColor: '', // 印刷颜色
  quotationNo: '', // 报价单号
  productionLength: '', // 生产长
  productionWidth: '', // 生产宽
  productionHeight: '', // 生产高
  productionSpecification: '', // 生产规格
  crossCuttingVersionNo: '', // 横切版号
  creator: '', // 制单人
  createTime: new Date().toISOString().slice(0, 19).replace('T', ' '), // 建单日期
  isApproved: false, // 审核
  area: '', // 面积
  packagingQuantity: '', // 包装数
  remark: '', // 备注
  isFinalized: false, // 结单
  isPrinted: false, // 打印
  productionRemark: '', // 生产备注
  innerOuterDiameter: '', // 内外径
  flangeType: '', // 楞型
  dieCuttingCalculation: false, // 模切算料
  templateWidth: '', // 模板宽
  templateLength: '', // 模板长
  modulus: '', // 模数
  outsourcing: false, // 外协
  productType: '0', // 产品类型
  proportionQuantity: '', // 配比数
  productUnit: '', // 产品单位
  subcomponent: false, // 子件
  serialNo: '', // 序号
  stapleBar: '', // 钉条
  addPoints: '', // 加分
  isExternalPurchase: false, // 外购
  sets: '', // 套数
  thickness: '', // 厚度
  unitWeight: '', // 单重
  isHeavenBox: false, // 天地盒
  heavenBoxHeight: '', // 天地盒高
  heavenBoxLength: '', // 天地盒长
  heavenBoxWidth: '', // 天地盒宽
  amount: '', // 金额
  setId: '', // 套件ID
  mainItemId: '', // 主件ID
  totalArea: '', // 总面积
  parameter1: '',
  parameter2: '',
  parameter3: '',
  parameter4: '',
  parameter5: '',
  parameter6: '',
  parameter7: '',
  parameter8: '',
  parameter9: '',
  parameter10: '', // 参数1-10
  isSameModel: false, // 同款
  bomSequenceNumber: '', // BOM序号
  bomLevel: '', // BOM层级
  unshippedQuantity: '', // 未入库数
  unsentQuantity: '', // 未送货数
  totalVolume: '', // 总体积
  printVersionNo: '', // 印刷版号
  addLoss: false, // 加损耗
  discount: '', // 折扣
  areaUnitPrice: '', // 面积单价
  totalWeight: '', // 总重
  deliveryAddress: '', // 送货地址
  deliveryRegion: '', // 送货区域
  updateTime: '', // 修改时间
  updater: '' // 修改人
})
const emptyMtlRow = ref({
  type: '', // 类型
  calculatedLength: '', // 计算长
  calculatedWidth: '', // 计算宽
  purchasedLength: '', // 采购宽
  purchasedQuantity: '', // 采购数量
  demandQuantity: '', // 需求数
  wideCut: '', // 宽开
  longCut: '', // 长开
  unit: '', // 单位
  horizontalPress1: '', // 横压1
  horizontalPress2: '', // 横压2
  horizontalPress3: '', // 横压3
  verticalPress1: '', // 纵压1
  verticalPress2: '', // 纵压2
  verticalPress3: '', // 纵压3
  verticalPress4: '', // 纵压4
  verticalPress5: '', // 纵压5
  horizontalPress4: '', // 横压4
  horizontalPress5: '', // 横压5
  remark: '', // 备注
  materialCode: '', // 材质编号
  materialName: '', // 材质名称
  pressLineType: '', // 压线类型
  quantityRatio: '', // 数量比
  purchasedCleanBoardQuantity: '', // 已采购净板数
  materialSource: '', // 用料来源
  calculatedQuantity: '', // 计算数量
  supplierCode: '', // 供应商编号
  supplierName: '', // 供应商名称
  grossBoardCoefficient: '', // 毛板系数
  cleanBoardCoefficient: '', // 净板系数
  areaQuotation: '', // 面积报价
  thickness: '', // 厚度
  density: '', // 密度
  totalOpenCount: '', // 总开数
  modulus: '', // 模数
  singleRawMaterialWeight: '', // 单个原料重量
  totalLength: '', // 总长
  lengthLoss: '', // 长损耗
  widthLoss: '', // 宽损耗
  materialUnit: '', // 用料单位
  trimming: '', // 修边
  remark1: '' // 备注1
})
const id = ref(route.query.id)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  id: null
})

const mtlQueryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  id: null
})

const bomQueryParams = reactive({
  pageNo: 1,
  pageSize: 10
})

/** 查询明细数据 */
const getDetail = async () => {
  const res = await SaleProductOrderApi.getSaleProductOrderDetailById(id.value)
  formData.value = res.data
}

const place = async () => {}

const check = async () => {}

const reject = async () => {}

const endOrder = async () => {}

const submitForm = async () => {}

// **************************生产订单明细**************************
const getOrderList = async () => {
  loading.value = true
  try {
    queryParams.id = id.value
    const data = await SaleProductOrderApi.getSaleProductOrderPageById(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

const addOrderRow = () => {
  list.value.push(emptyRow.value)
}

const copyOderRow = () => {}
const switchOderBom = () => {
  dialogVisible.value = true
  getBomList()
}

const handleDelete = async (index: number, id: number) => {
  if (index !== -1) {
    list.value.splice(index, 1)
  }
}

const currentRow = ref({}) // 选中行
const handleCurrentChange = (row) => {
  currentRow.value = row
}
const handleBomCurrentChange = (row) => {}
const handleSelectMtlCurrentChange = (row) => {}

// **************************用料信息**************************
const getMtlList = async () => {
  mtlQueryParams.id = id.value
  const data = await SaleProductOrderApi.getSaleProductMtlPageById(mtlQueryParams)
  materialList.value = data.list
  mtlTotal.value = data.total
}

const addMtlRow = () => {
  materialList.value.push(emptyMtlRow.value)
}

const computeMtl = () => {}

const selectMtl = () => {
  dialogMtlVisible.value = true
}

const copyMtlRow = () => {}

const handleDeleteMtl = async (index: number, id: number) => {
  if (index !== -1) {
    materialList.value.splice(index, 1)
  }
}

// **************************BOM信息**************************
const getBomList = async () => {
  bomLoading.value = true
  try {
  } finally {
    bomLoading.value = false
  }
}

const handleBomQuery = async (index: number, id: number) => {}

/** 初始化 **/
onMounted(() => {
  if (route.query.type == 'update') {
    getDetail()
    getOrderList()
    getMtlList()
  }
})
</script>
